<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css'>
    <style>
        @import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);
        .checkbox-primary input[type="checkbox"]:checked:after {
            color: #337ab7;
        }
        .checkbox-danger input[type="checkbox"]:checked:after {
            color: #d9534f;
        }
        .checkbox-info input[type="checkbox"]:checked:after {
            color: #5bc0de;
        }
        .checkbox-warning input[type="checkbox"]:checked:after {
            color: #f0ad4e;
        }
        .checkbox-success input[type="checkbox"]:checked:after {
            color: #5cb85c;
        }
        .checkbox-inline {
            margin-top: 0px;
        }
        .checkbox input[type=checkbox],
        input[type="checkbox"] {
            position: absolute;
            visibility: hidden;
            margin-top: 0;
            margin-left: -22px;
        }
        .checkbox input[type=checkbox]:disabled,
        input[type="checkbox"]:disabled {
            opacity: 0.65;
        }
        input[type="checkbox"]:checked:after,
        input[type="checkbox"]:after {
            visibility: visible;
            font-family: FontAwesome;
            display: inline-block;
            color: #333;
        }
        input[type="checkbox"]:checked:after:disabled,
        input[type="checkbox"]:after:disabled {
            cursor: not-allowed;
            opacity: 0.65;
        }
        input[type="checkbox"]:checked:after {
            font-size: 18px;
            content: "\f14a";
        }
        input[type="checkbox"]:after {
            font-size: 20px;
            content: "\f096";
        }
    </style>
</head>
<body>

<div class="container">
    <h2>Checkboxes</h2>
    <form role="form">
        <div class="row">
            <div class="col-md-6">
                <fieldset>
                    <h2>Basic</h2>
                    <p>Supports bootstrap brand colors: <code>.checkbox-primary</code>, <code>.checkbox-info</code> etc.</p>
                    <div class="checkbox">
                        <label>
                            <input class="styled" type="checkbox">Default</label>
                    </div>
                    <div class="checkbox checkbox-primary">
                        <label>
                            <input class="styled" type="checkbox" checked>Primary</label>
                    </div>
                    <div class="checkbox checkbox-success">
                        <label>
                            <input class="styled" type="checkbox">Success</label>
                    </div>
                    <div class="checkbox checkbox-info">
                        <label>
                            <input class="styled" type="checkbox">Info</label>
                    </div>
                    <div class="checkbox checkbox-warning">
                        <label>
                            <input type="checkbox" class="styled" checked>Warning</label>
                    </div>
                    <div class="checkbox checkbox-danger">
                        <label>
                            <input type="checkbox" class="styled" checked>Check me out</label>
                    </div>
                    <p>Checkboxes without label text</p>
                    <div class="checkbox">
                        <label>
                            <input type="checkbox" class="styled" id="singleCheckbox1" value="option1" aria-label="Single checkbox One">
                        </label>
                    </div>
                    <div class="checkbox checkbox-primary">
                        <label>
                            <input type="checkbox" class="styled styled-primary" id="singleCheckbox2" value="option2" checked aria-label="Single checkbox Two">
                        </label>
                    </div>
                    <h2>Inline checkboxes</h2>
                    <div class="checkbox checkbox-inline">
                        <label>
                            <input type="checkbox" class="styled" value="option1">Inline One </label>
                    </div>
                    <div class="checkbox checkbox-success checkbox-inline">
                        <label>
                            <input type="checkbox" class="styled" value="option1" checked>Inline Two </label>
                    </div>
                    <div class="checkbox checkbox-inline">
                        <label>
                            <input type="checkbox" class="styled" value="option1">Inline Three </label>
                    </div>
                </fieldset>
            </div>
            <div class="col-md-6">
                <fieldset>
                    <h2>Disabled</h2>
                    <p>Disabled state also supported.</p>
                    <div class="checkbox">
                        <label>
                            <input class="styled" type="checkbox" disabled>Can't check this</label>
                    </div>
                    <div class="checkbox checkbox-success">
                        <label for="checkbox10">
                            <input class="styled styled" type="checkbox" disabled checked>This too</label>
                    </div>
                    <div class="checkbox checkbox-warning checkbox-circle">
                        <label for="checkbox11">
                            <input class="styled" type="checkbox" disabled checked>And this</label>
                    </div>
                </fieldset>
            </div>
        </div>
    </form>
</div>
</body>
</html>